<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 圣杯布局 */
        #container {
            overflow: hidden;
            padding: 0 200px;
        }

        #middle {
            height: 200px;
            width: 100%;
            background-color: rgb(97, 199, 240);
            float: left;
            text-align: center;
        }

        #left {
            height: 200px;
            width: 200px;
            background-color: rgb(206, 162, 40);
            float: left;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }


        #right {
            height: 200px;
            width: 200px;
            background-color: rgb(223, 93, 179);
            float: left;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }

        #head,
        #footer {
            height: 50px;
            width: 100%;
            background-color: rgb(136, 126, 141);
            clear: both;
        }

        /* #inner {
            margin: 0 200px 0 200px;
            height: 200px;
        } */
    </style>
</head>

<body>

    <div id="head">
        头部
    </div>

    <div id="container">
        <div id="middle">
            中间<br>
            <p>
                圣杯和双飞翼布局都是两边顶宽，中间自适应的布局。中间栏要放在文档流前面以优先渲染<br>
                圣杯和双飞翼虽然布局形式相同，但是实现的方法不同。<br>
                圣杯布局通过给左右两个盒子设置定位来实现
                双飞翼布局通过给中间盒子再添加一个盒子来实现。
            </p>
        </div>
        <div id="left">
            左
        </div>
        <div id="right">
            右
        </div>
    </div>
    <div id="footer">
        底部
    </div>
    <!-- 双飞翼布局 -->
    <!-- <div id="middle">
        <div id="inner">
            小盒子
        </div>
    </div> -->
</body>

</html>